<template>
	<view class="energy-consumption-container">
		<view class="title">
			<view class="left-title">储能站收益统计</view>
			<view class="btn">
				<!-- 	<uv-subsection :list="list" mode="button" :current="current" @change="change" activeColor="#3c9cfe"
					bgColor="#ffffff"></uv-subsection> -->

			</view>
		</view>
		<view class="content">
			<l-echart ref="chartRef" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script setup>
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif

	import {
		ref,
		watch,
		onMounted,
		reactive,
		computed,
	} from "vue";
	import {
		day,
		month,
		year
	} from "@/utils/allData";
	const props = defineProps({
		modelData: {
			type: Object,
			default: () => ({}) // 明确标识未初始化状态
		}
	})
	const current = ref(1)

	const list = ref(['日', '月', '年', '总'])
	const activeIndex = ref(0)
	const dateIndex = ref(0)
	const dateNow = ref(null)
	const serisData = ref([])
	const xAisData = ref([])
	const option = {
		legend: {},

		tooltip: {
			// 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: "axis",
			backgroundColor: "rgba(32, 33, 36,.7)",
			borderColor: "rgba(32, 33, 36,0.20)",
			borderWidth: 1,
			textStyle: {
				// 文字提示样式
				color: "#fff",
				fontSize: "12",
			},
		},
		xAxis: [{
				type: "category",
				data: [],
				axisTick: {
					show: false
				}
			},
		],
		yAxis: [{
			name: "万元",
			type: "value",
		}, ],
		series: [{
			type: "line",
			name: "",
			stack: "Ad",
			smooth: true,
			showSymbol: false,
			data: [],
		}, ],
	}
	const change = (index) => {
		current.value = index
	}
	const bindPickerChange = (e) => {
		activeIndex.value = e.detail.value
	}
	//获取日期
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		dateNow.value = `${year}`
		return `${year}-${month}-${day}`;
	}
	//日期选中
	const datePickerChange = (e) => {
		let year = e.detail.value.split('-')[0]
		dateNow.value = year
	}
	//格式化数据
	const formatData = (data) => {
		serisData.value = data.map(item => item.wvalue);
		xAisData.value = data.map(item => item.wtime)

		option.xAxis[0].data = xAisData.value
		option.series[0].data = serisData.value
		init();
	}
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option);
	}
	onMounted(() => {
		getDate()
	})


	watch(() => props.modelData, (val) => {
		if (val && val.cnzsytj) {
			formatData(val.cnzsytj);
		}
	}, {
		immediate: true,
		deep: true
	})
</script>

<style lang="scss" scoped>
	.energy-consumption-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				width: 260rpx;

				.line {
					width: 8rpx;
					background: #909090;
					border-radius: 8rpx;
				}


				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>